<template>
  <div id="div">
    {{title}}
  </div>
</template>

<script>
import { destory } from 'vue'
export default {
  data() {
    return {
      title: 'hello'
    }
  },

  methods: {
    handleClick() {
      console.log(0)
    }
  },

  // 生命周期函数
  // 这四个钩子只调用一次
  beforeCreate() {
    // this.x = 100
    // console.log(this.title)
    // console.log('beforeCreate.')
    // console.log(document.querySelector('#div'))
  },

  created() {
    // console.log(this.title)
    // console.log(document.querySelector('#div'))
  },

  beforeMount() {
    // console.log(this.title)
    // console.log(document.querySelector('#div'))
  },

  mounted() {
    // console.log(this.x)
    // console.log('mounted.')
    console.log(this.title)
    // console.log(document.querySelector('#div'))
    // this.title = 'world'

    setInterval(() => {
      // this.title = new Date().getTime()
    }, 1000)

    setTimeout(() => {
      // destory()
    }, 3000)
  },

  // 调用多次的钩子
  beforeUpdate() {
    // console.log(0)
  },
  updated() {
    // console.log(1)
  },

  beforeUnmount() {
    console.log(0)
  },
  unmounted() {
    console.log(1)
  },
}
</script>